import "./index.scss"
import React, { Component } from 'react'
import { GetSwiper, GetGroups, GetNews } from '../../api/home'
import { Swiper, PullToRefresh } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'
class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      swiperData: [],
      groupsData: [],
      newsData: [],
    }
  }
  componentDidMount() {
    this.getSwiper()//首页轮播图
    this.getGroups() //租房小组
    this.getNews() //资讯
  }
  //首页轮播图
  getSwiper = async () => {
    const resp = await GetSwiper()
    this.setState({
      swiperData: resp.data.body
    })
  }
  //租房小组
  getGroups = async () => {
    const resp = await GetGroups()
    this.setState({
      groupsData: resp.data.body
    })
  }
  //资讯
  getNews = async () => {
    const resp = await GetNews()
    this.setState({
      newsData: resp.data.body
    })
  }
  render() {
    const { swiperData, groupsData, newsData } = this.state
    const { history } = this.props
    return (
      <PullToRefresh onRefresh={async () => {
        await sleep(2000)
      }}>
        <div className="home">
          <div className="home_swiper">
            <div className="home_search">
              <div className="home_search_left">
                <div className='searchLeft'>
                  <span onClick={() => history.push('/citylist')}>上海</span>
                  <span className="icon iconfont icon-xiala"></span>
                </div>
                <div className="searchRight">
                  <span className="icon iconfont icon-sousuo"></span>
                  <input type="text" placeholder="请输入小区或地址" />
                </div>
              </div>
              <span className="icon iconfont icon-baiduMaps" onClick={() => history.push('/map')}></span>
            </div>
            <Swiper style={{ width: '100%', height: '100%' }}>
              {
                swiperData?.map(item => {
                  return (
                    <Swiper.Item key={item.id}>
                      <img src={`http://47.102.145.189:8009${item.imgSrc}`} alt="" style={{ width: '100%', height: '100%' }} />
                    </Swiper.Item>
                  )
                })
              }
            </Swiper>
          </div>
          <div className="home_nav">
            <b onClick={() => history.push(`/page/list`)}>
              <img src={require('../../static/img/整租.png')} alt="" />
              <span>整租</span>
            </b>
            <b onClick={() => history.push(`/page/list`)}>
              <img src={require('../../static/img/合租.png')} alt="" />
              <span>合租</span>
            </b>
            <b onClick={() => history.push(`/map`)}>
              <img src={require('../../static/img/地图找房.png')} alt="" />
              <span>地图找房</span>
            </b>
            <b onClick={() => history.push(`/login`)}>
              <img src={require('../../static/img/去出租.png')} alt="" />
              <span>去出租</span>
            </b>
          </div>
          <div className="home_groups">
            <div className="home_groups_top">
              <h3>租房小组</h3>
              <span>更多</span>
            </div>
            <div className="home_groups_bottom">
              {groupsData?.map(item => {
                return (
                  <dl key={item.id}>
                    <dt>
                      <h3>{item.title}</h3>
                      <p>{item.desc}</p>
                    </dt>
                    <dd>
                      <img src={`http://47.102.145.189:8009${item.imgSrc}`} alt="" />
                    </dd>
                  </dl>
                )
              })
              }
            </div>
          </div>
          <div className="home_news">
            <h3 className="home_news_title">最新资讯</h3>
            {
              newsData?.map(item => {
                return (
                  <div key={item.id} className="news_item">
                    <img src={`http://47.102.145.189:8009${item.imgSrc}`} alt="" />
                    <div className='item_right'>
                      <h3 className="title">{item.title}</h3>
                      <div className="item_right_bottom">
                        <span>{item.from}</span>
                        <span>{item.date}</span>
                      </div>
                    </div>
                  </div>
                )
              })
            }
          </div>
        </div >
      </PullToRefresh>
    )
  }
}

export default Home